<template>
    <Page class="container_page" :use-header="true" title="用户管理">
        <UserEdit ref="refEdit" :title="editDrawerTitle" />
        <div class="content_page">
            <a-card class="content_org">
                <OrgDictTree @select="onSelect" />
            </a-card>
            <div class="content_user">
                <a-card>
                    <UserQuery />
                </a-card>
                <a-card>
                    <UserOperation @insert="onInsert" style="margin-bottom: 16px;" />
                    <UserTable ref="refTable" @update="onUpdate" />
                </a-card>
            </div>
        </div>
    </Page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Bus } from '@/plugin';
// Component
import Page from '@/component/layout/Page.vue';
import OrgDictTree from '@/component/org/OrgDictTree.vue';
import UserEdit from '@/component/user/UserEdit.vue';
import UserQuery from '@/component/user/UserQuery.vue';
import UserOperation from '@/component/user/UserOperation.vue';
import UserTable from '@/component/user/UserTable.vue';

onMounted(() => {
    init();
});

const refEdit = ref();
const refTable = ref();
const editDrawerTitle = ref('');

const init = () => {
    refTable.value.refresh();
}

const onSelect = (orgId: string) => {
    Bus.emit('refresh_user', { orgId });
}

const onInsert = () => {
    editDrawerTitle.value = '新增用户管理';
    refEdit.value.open();
}

const onUpdate = (id: string) => {
    editDrawerTitle.value = '修改用户管理';
    refEdit.value.open(id);
}

</script>

<style lang="less" scoped>
.container_page {
    .content_page {
        display: flex;
        flex-direction: row;
        flex-grow: 1;

        .content_org {
            width: 300px;
        }

        .content_user {
            margin-left: 24px;
            flex-grow: 1;
        }
    }

    .ant-card {
        margin-top: 24px;

        &:first-child {
            margin-top: 0;
        }
    }
}
</style>
